<template>
  <el-dialog v-model="_visible" :title="title" :width="width" :modal="false" draggable center>
    <div class="iconCaretLeft" @click="toggleList">
      <el-icon>
        <CaretLeft v-if="!isListExpanded" />
        <CaretRight v-else />
      </el-icon>
    </div>
    <div class="dialogChat" style="display: flex;">
      <div v-if="isListExpanded" style="min-width: 300px; padding-right: 16px;">
        <Tree @treeSelect="handleSelected" />
      </div>
      <div style="width: 100%">
        <Chat :chatValue="chatValue" />
      </div>

    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { CaretLeft, CaretRight } from '@element-plus/icons-vue';
import Tree from './tree.vue'
import Chat from '@/components/chat.vue'

const props = defineProps<{
  title: string;
  visible: boolean,
}>();

const emit = defineEmits(['update:visible']);

const _visible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});


const width = ref('500px')
const chatValue = ref()

const isListExpanded = ref(false);

const toggleList = () => {
  width.value = isListExpanded.value == false ? '800px' : '500px'
  isListExpanded.value = !isListExpanded.value;
};

const handleClose = () => {

}

const handleSelected = (selectedData: any) => {
  chatValue.value = selectedData
}

</script>
<style scoped lang="less">
// .dialogChat {
//   :deep(.t-textarea__inner.t-is-default.t-resize-none) {
//     min-height: 50px !important;
//     height: 50px !important;
//   }

//   :deep(.t-chat__footer__textarea__icon) {
//     bottom: 1px !important;
//   }

//   :deep(.t-chat__footer__textarea .t-textarea .t-textarea__inner) {
//     padding: 13px 50px 13px 20px;
//   }

//   :deep(.t-chat__footer__textarea__icon .t-chat__footer__textarea__icon__default) {
//     width: 40px;
//     height: 40px;
//   }
// }

.iconCaretLeft {
  position: absolute;
  left: 0px;
  top: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 1001;
  transition: all 0.3s ease;
  background: #ddd;
  border-radius: 2px;
  width: 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 应用滚动条样式 */
::-webkit-scrollbar-thumb {
  background-color: var(--td-scrollbar-color);
}

::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: var(--td-scrollbar-hover-color);
}

::-webkit-scrollbar-track {
  background-color: var(--td-scroll-track-color);
}
</style>
